<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
        <el-button size="mini" style="float: right;" @click="fanhui()">返回</el-button>
      </div>
      <div>
        <el-table :data="goodsListData" border style="width: 100%; margin-top: 10px;">
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="280">
            <template slot-scope="scope">
              <a v-for="(a, b) in scope.row.name.split(' ')" :key="a">
                <p v-if="b == 0">{{ a }}</p>
              </a>
              <br />品牌:
              <span>{{ scope.row.brand_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              价格:￥
              <span>{{ (scope.row.price/100).toFixed(2) }}</span>
              <br />货号:NO.00000
              <span>{{ scope.row.sn }}</span>
            </template>
          </el-table-column>
          <el-table-column label="属性">
            <template slot-scope="scope">
              <span>{{scope.row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column property="kucun" label="库存"></el-table-column>
          <el-table-column prop="money" label="小计">
            <template slot-scope="scope">
              ￥
              <span>{{ (scope.row.money/100).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin-right: 20px;margin-top: 20px;">
          <span>
            合计:
            <b style="color: red;">￥{{ (OrderInfo.totalMoney/100).toFixed(2) }}</b>
          </span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span>添加商品</span>
      </div>
      <div>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">搜索商品</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <el-input v-model="GoodsName" placeholder="商品名称" style="width:200px;"></el-input>
              <el-button type="primary" @click="chaxun()">搜索</el-button>
              <el-select
                v-model="value"
                placeholder="请选择"
                @change="selectChange"
                style="width:600px;margin-left: 10px;"
              >
                <el-option
                  v-for="item in goodslist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">商品名称</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{goodsInfo.name}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">货号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{goodsInfo.sn}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">分类</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{shuxin}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">品牌</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{goodsInfo.brandName}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">价格</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="goodsInfo.price">￥{{goodsInfo.price}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">属性</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <div v-for="(item, i, index) in specItems" :key="i" style="float: left;">
                <el-select v-model="selectValue[index]" :placeholder="i" @change="shuxinChange">
                  <el-option v-for="(item2, i2) in item" :key="i2" :label="item2" :value="item2"></el-option>
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">库存</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{goodsInfo.num}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">数量</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <el-input v-model="num" style="width:200px"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">操作</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <el-button type="primary" @click="addOrder()">加入订单</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      orderId: '',
      goodsListData: [],
      OrderInfo: {},
      GoodsName: '',
      goodslist: [],
      value: '',
      goodsInfo: {},
      specItems: {},
      selectValue: [],
      shuxin: '',
      num: '1'
    };
  },
  created () {
    // 取到路由带过来的参数
    this.orderId = this.$route.query.id;
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      // 获取订单中的商品信息
      const { data: resp } = await this.$http.get(
        `vi/order/order/item/queryByOrderIdGoods/${this.orderId}`
      );
      this.goodsListData = resp.data.TbOrderItems;
      // 根据id获取订单信息
      const { data: res } = await this.$http.get(
        `vi/order/order/detail/${this.orderId}`
      );
      this.OrderInfo = res.data.tbOrder
    },
    // 点击查询
    async chaxun () {
      this.selectValue = []
      // 获取商品列表
      const { data: res } = await this.$http.get(
        `vi/order/order/queryByGoodsLikeName/${this.GoodsName}`
      );
      this.goodslist = JSON.parse(res.data.skus)
    },
    // 选择框改变
    async selectChange (val) {
      this.selectValue = []
      this.shuxin = ''
      // 根据id查询商品
      const { data: res } = await this.$http.get(
        `vi/order/order/queryByGoodsName/${val}`
      );

      this.goodsInfo = JSON.parse(res.data.goodsDto)
      this.specItems = JSON.parse(this.goodsInfo.specItems)
      if (this.goodsInfo.category1Id != undefined) {
        const { data: res } = await this.$http.get(
          `vi/order/order/detailname/${this.goodsInfo.category1Id}`
        );
        this.shuxin = this.shuxin + res.data.name
      }
      if (this.goodsInfo.category2Id != undefined) {
        const { data: res } = await this.$http.get(
          `vi/order/order/detailname/${this.goodsInfo.category2Id}`
        );
        this.shuxin = this.shuxin + " > " + res.data.name
      }
      if (this.goodsInfo.category3Id != undefined) {
        const { data: res } = await this.$http.get(
          `vi/order/order/detailname/${this.goodsInfo.category3Id}`
        );
        this.shuxin = this.shuxin + " > " + res.data.name
      }
    },
    // 属性下拉框改变
    shuxinChange (val) {

    },
    // 加入订单
    async addOrder () {
      if (this.num === '') {
        // 提示信息
        this.$message({
          type: "info",
          message: "请填写数量"
        });
        return
      }

      if (this.selectValue.length > 0) {
        let spec = ''
        this.selectValue.forEach(val => {
          spec = spec + '%' + val
        })
        var oo = {}
        oo.spec = spec.substr(1)
        oo.spuId = this.goodsInfo.spuid
        const { data: res } = await this.$http.post(
          `vi/order/order/querySkuGoodsBySpec`,
          oo
        );
        if (!res) {
          this.$message({
            type: "warning",
            message: "不存在该类型商品"
          });
          return
        }

      }
      var o = {}
      o.categoryId1 = this.goodsInfo.category1Id
      o.categoryId2 = this.goodsInfo.category2Id
      o.categoryId3 = this.goodsInfo.category3Id
      o.spuId = this.goodsInfo.spuid
      o.skuId = res
      o.orderId = this.orderId
      o.name = this.goodsInfo.name
      o.price = this.goodsInfo.price
      o.num = this.num
      o.money = Number(this.goodsInfo.price) * Number(this.num)
      o.image = this.goodsInfo.image
      o.weight = Number(this.goodsInfo.weight) * Number(this.num)

      const { data: res } = await this.$http.post(
        `vi/order/order/item/addGoodsOrder`,
        o
      );

      // 提示信息
      this.$message({
        type: "success",
        message: "添加成功"
      });

      this.getGoodsList()
    },
    fanhui () {
      this.$router.push({
        query: {
          id: this.orderId
        },
        path: "/home/order/orderDetails"
      });
    }
  }
};
</script>
<style scoped>
.biaotidiv {
  height: 50px;
  background-color: #f3f6fc;
  text-align: center !important;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
}
.neirondiv {
  height: 50px;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
  padding-left: 10px;
}
</style>